<template>
	<view style="height: 100%;">
		<view class="top">
			<view class="divid_line_horizen"></view>
			<text class="title">{{jobDetail.basic.name}}</text>
			<text class="salary">{{wage}}</text>
			<view v-if="welfareTags&&welfareTags.length>0" class="tag">
				<view v-for="(item, index) in welfareTags" :key="">
					<u-tag style="padding: 6rpx" :text="item" bg-color="#eee" border-color="#eee" color="#666" type="info" />
				</view>
			</view>

			<view class="divid_line_horizen"></view>
			<view class="address">
				<image class=".locate_img" src="/static/uview/findjob/locate.png" mode=""></image>
				<view style="font-size: 30rpx;color: #666666;max-width: 540rpx;">{{jobDetail.basic.detailAddress}}</view>
				<view class="map_guide" @click="gomap">
					<image style="width: 40rpx;height: 40rpx;" src="../../../static/uview/findjob/map_guide.png"></image>
					<text style="font-size: 28rpx;color: #54b4f5;margin-left: 10rpx;">导航</text>
				</view>
			</view>
			<view class="divid_line_horizen"></view>
			<view v-if="jobDetail.basic.has_reward=='y'" class="reward">
				<image class=".locate_img" src="/static/uview/findjob/reward.png" mode=""></image>
				<view style="display: flex;flex-direction: column;width: 100%;">
					<view>
						<text style="font-size: 28rpx;color: #333;">悬赏金额</text>
						<text class="red_bg">参考承诺书</text>
					</view>
					<view>
						<text style="font-size: 24rpx;color: #999;">奖励1234元</text>
						<text style="float:right;">推荐人将获得100元</text>
					</view>
				</view>

			</view>

		</view>

		<view class="divid_line_horizen"></view>
		<view class="basic_require">
			<text class="sub_title">职位要求</text>
			<view style="display: flex;flex-direction: column;margin-top: 30rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="category">
						<image style="width: 40rpx;height: 40rpx;margin-right:16rpx ;" src="../../../static/uview/findjob/degree.png"></image>
						<text style="font-size: 28rpx;color: #666666;">本科</text>
					</view>
					<view class="divid_line_vertical"></view>
					<view class="category">
						<image style="width: 40rpx;height: 40rpx;margin-right:16rpx ;" src="../../../static/uview/findjob/work_time.png"></image>
						<text style="font-size: 28rpx;color: #666666;">3年</text>
					</view>
					<view class="divid_line_vertical"></view>
					<view class="category">
						<image style="width: 40rpx;height: 40rpx;margin-right:16rpx ;" src="../../../static/uview/findjob/age.png"></image>
						<text style="font-size: 28rpx;color: #666666;">年龄不限</text>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="category">
						<image style="width: 40rpx;height: 40rpx;margin-right:16rpx ;" src="../../../static/uview/findjob/gender.png"></image>
						<text style="font-size: 28rpx;color: #666666;">性别不限</text>
					</view>
				</view>

			</view>
		</view>

		<view class="divid_line_horizen"></view>
		<view class="basic_require">
			<text class="sub_title">任职要求</text>
			<view style="margin: 30rpx 0;">
				<u-read-more ref="uReadMore" :shadow-style="shadowStyle" :toggle="true" :show-height="200">
					<rich-text :nodes="content"></rich-text>
				</u-read-more>
			</view>
		</view>


		<view style="background-color: #f9f9f9;height: 20rpx;"></view>
		<view class="top">
			<view class="basic_require">
				<view class="sub_title">公司信息</view>
				<view style="display: flex;flex-direction: row;">
					<image style="width: 120rpx;height: 120rpx;" src="../../../static/uview/common/defaut_headimg.png">
					</image>
					<view style="display: flex;flex-direction: column;margin-left: 15rpx;align-self: center;">
						<text style="font-size: 36rpx;color: #333333;">名创优品(望京soho店)</text>
						<text style="font-size: 26rpx;color: #666666;margin-top: 16rpx;">在招职位52个</text>
					</view>
				</view>
			</view>

		</view>
		<view style="background-color: #f9f9f9;height: 240rpx;"></view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<button style="background: none;" class="share" open-type="share">
				<view class="share" >
					<image class="icon" src="../../../static/uview/findjob/share.png" style="margin-top: 20rpx;"></image>
					<text class="text" style="margin-top: -10rpx;">分享</text>
				</view>
				
			</button>
			<view class="share" @click="recommend">
				<image class="icon" src="../../../static/uview/findjob/reccommend.png"></image>
				<text class="text">推荐</text>
			</view>
			<view class="commit" @click="commit">
				<text style="font-size: 32rpx;color: #FFFFFF;line-height: 84rpx;">我要投递</text>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				id:"",
				jobDetail: {},
				welfareTags:[],
				wage:"",
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
								山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`
			}
		},
		onLoad(e) {
			console.log("onload",e);
			this.id = e.id
			this.wage = e.wage
			this.welfareTags = e.welfareTags?e.welfareTags.split(","):""
			this.getJobDetail()
		},
		methods: {
			getJobDetail(){
				this.$u.api.getJobDetail({
					id:this.id
				}).then(res => {
					this.jobDetail = this.handleData(res);
					console.log(res);
				})
			},
			handleData(data){
				if(data&&data.basic){
					data.basic.detailAddress = data.basic.province+data.basic.city+data.basic.district+data.basic.address
				}
				return data
			},
			share() {//type 图文0、纯文字1、纯图片2、音乐3、视频4、小程序5
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "uni-app分享",
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					imageUrl: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			recommend() {
				this.$u.api.goRecommendJob({
					position_id:this.id,
					name:this.jobDetail.basic.creator,
					mobile:this.jobDetail.basic.creator_mobile
				}).then(res => {
					console.log(res);
					// this.$u.route('/pages/findjob_sub/recommend/recommend');
				})
			},
			commit() {
				this.$u.api.goApplyJob({
					position_id:this.id
				}).then(res => {
					console.log(res);
					this.$u.route('/pages/findjob_sub/commitResult/commitResult');
				})
				
			},
			gomap() {
				this.$u.route('/pages/findjob_sub/map/map');
			}
		},
	}
</script>

<style lang="scss" scoped>
	.top {
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.title {
		font-size: 46rpx;
		color: #000;
		font-family: PingFangSC-Semibold, PingFang SC;
		margin-top: 30rpx;
	}

	.salary {
		font-size: 36rpx;
		color: #ff5229;
		margin-top: 20rpx;
	}

	.tag {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 48rpx 0;
	}

	.address {
		display: flex;
		flex-direction: row;
		margin: 40rpx 0;
	}

	.locate_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}

	.map_guide {
		    right: 0;
		    position: absolute;
		width: 132rpx;
		display: flex;
		align-items: center;
	}

	.reward {
		display: flex;
		flex-direction: row;
		margin: 30rpx 0;

		.red_bg {
			background: #FA4B4B;
			border-radius: 24rpx;
			border: 1px solid #EEEEEE;
			padding: 4rpx 12rpx;
			font-size: 26rpx;
			color: #fff;
			float: right;
		}
	}

	.basic_require {
		margin: 30rpx;
	}

	.sub_title {
		font-size: 36rpx;
		color: #333333;
		font-family: PingFangSC-Semibold, PingFang SC;
		margin: 30rpx 0;
	}

	.category {
		width: 180rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bottom {
		width: 100%;
		height: 120rpx;
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		display: flex;
		flex-direction: row;

		.icon {
			width: 32rpx;
			height: 32rpx;
		}

		.share {
			width: 156rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.text {
			margin-top: 6rpx;
			font-size: 26rpx;
			color: #666666;
		}

		.commit {
			width: 380rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #1698F9 0%, #4CC5FC 100%);
			border-radius: 6px;
			align-self: center;
			text-align: center;
			margin: 0 30rpx;
		}
	}
</style>
